<template>
  <div class="item">
    <!-- <img :src="ereData.src" /> -->
    <div class="item-detail">
      <div class="item-detail-num">
        <div class="title" style="white-space: nowrap">{{ ereData.name }}</div>
        <div
          class="num"
          :style="`background:url(${ereData.src});background-size: 100% 100%;`"
        >
          <CountTo
            style="color: #44efff; font-size: 21px"
            :startVal="startVal"
            :endVal="ereData.num"
            :duration="duration"
            :decimals="ereData.fixed"
          />
          <span>{{ ereData.unit }}</span>
        </div>
      </div>

      <div class="icon" :style="iconStyle">
        <span>{{ isIcon ? "占比" : "同比" }}</span>
        <span class="num">
          <span>{{ ereData.radio }}%</span>
          <!-- <CountTo :startVal="startVal" :endVal="ereData.radio" :duration="duration" />% -->
          <img
            src="../../assets/common-new/green-top.png"
            class="arrawtransform"
            v-if="ereData.isTrend && !isIcon"
          />
          <img
            src="../../assets/common-new/red-down.png"
            class="arrawtransform"
            v-if="!ereData.isTrend && !isIcon"
          />
        </span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    ereData: {},
    isIcon: {},
    iconStyle: {},
  },
  data() {
    return {
      startVal: 0,
      duration: 3000,
    };
  },
  components: {},
  mounted() {},
  beforeDestroy() {},
  methods: {},
};
</script>

<style lang="scss" scoped>
@import "../../assets/scss/qjzl.scss";

.item {
  flex: 1;
  flex-shrink: 0;
  // height: 60px;
  display: flex;
  justify-content: left;
  align-items: center;

  .item-detail {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 200px;
    .item-detail-num {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      margin-left: 6px;
      font-size: 14px;
      font-weight: bold;
      color: #fff;
      width: 100%;
      // margin-bottom: 10px;

      .num {
        border: 1px solid red;
        width: 180px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        white-space: nowrap;
        font-size: 16px;
        color: #34effe;

        span {
          color: #fff;
          font-size: 12px;
          padding-left: 5px;
        }
      }
    }

    .icon {
      // flex-shrink: 0;
      display: flex;
      justify-content: center;
      margin-left: 8px;
      font-size: 12px;
      // margin-top: 4px;

      .num {
        display: flex;
        color: #34effe;

        img {
          margin-left: 3px;
          width: 8px;
          height: 12px;
          flex-shrink: 0;
          margin-top: 2px;
        }
      }
    }
  }
}
</style>
